<template>
    <div class="pd_20">
        <ViewLog ref="view_log" />
        <PassForm ref="pass_ref" :queryInfo="queryInfo" @getDataList="getDataList" />
        <div class="flexbox flexcenter flexbetween">
            <div class="font_14 color_01">数据总览</div>
            <el-date-picker style="width:240px" value-format="yyyy-MM-dd" v-model="countInfo.date" size="small" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="getDataCount()">
            </el-date-picker>
        </div>
        <AllModel :countData="countData" v-loading="loading2" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)" />
        <div class="mt_20" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <el-radio-group v-model="queryInfo.types" size="small" @change="selectTab">
                <el-radio-button :label="0">待审素材</el-radio-button>
                <el-radio-button :label="1">一阶测试</el-radio-button>
                <el-radio-button :label="2">二阶测试</el-radio-button>
                <el-radio-button :label="3">数据汇总</el-radio-button>
            </el-radio-group>
            <div class="flexbox mt_20">
                <div class="flexbox flexcenter flex">
                    <template v-if="queryInfo.types==0">
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box drop_hover">
                                <span class="drop_text">审核状态</span>
                                <span class="drop_title">{{queryInfo.examine !==''?repeatSinge(examineList,queryInfo.examine,'id','nickname'):'全部'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div class="dropdown_hascheck flexbox flexcenter">
                                    <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.examine !==''}">已选 {{queryInfo.examine !==''?'1':'0'}} 项</span>
                                    <div class="rank_line" style="margin:0 10px"></div>
                                    <el-link type="primary" :underline="false" @click="clearQuery('examine',2)" v-if="queryInfo.examine !==''">清除已选</el-link>
                                </div>
                                <el-radio-group v-model="queryInfo.examine" class="check_style" @change="getDataList(1)">
                                    <el-radio :label="item.id" v-for="(item,index) in examineList" :key="index">
                                        <span class="el_check_title">{{item.nickname}}</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-radio>
                                </el-radio-group>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <div class="rank_line" style="margin-right:12px"></div>
                    </template>
                    <template v-if="queryInfo.types==1 || queryInfo.types==2">
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box drop_hover">
                                <span class="drop_text">评分状态</span>
                                <span class="drop_title">{{queryInfo.status !==''?repeatSinge(statusList,queryInfo.status,'id','nickname'):'全部'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div class="dropdown_hascheck flexbox flexcenter">
                                    <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.status !==''}">已选 {{queryInfo.status !==''?'1':'0'}} 项</span>
                                    <div class="rank_line" style="margin:0 10px"></div>
                                    <el-link type="primary" :underline="false" @click="clearQuery('status',2)" v-if="queryInfo.status !==''">清除已选</el-link>
                                </div>
                                <el-radio-group v-model="queryInfo.status" class="check_style" @change="getDataList(1)">
                                    <el-radio :label="item.id" v-for="(item,index) in statusList" :key="index">
                                        <span class="el_check_title">{{item.nickname}}</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-radio>
                                </el-radio-group>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <div class="rank_line" style="margin-right:12px"></div>
                    </template>
                    <el-input style="width:200px" clearable size="small" placeholder="素材名称、素材 ID" suffix-icon="el-icon-search" @change="getDataList(1)" v-model="queryInfo.query">
                    </el-input>
                    <span class="font_14 color_02" style="margin:0 12px">上新时间</span>
                    <el-date-picker style="width:240px" value-format="yyyy-MM-dd" v-model="queryInfo.create_time" @change="getDataList(1)" size="small" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                    <span class="font_14 color_02" style="margin:0 12px">评分时间</span>
                    <el-date-picker style="width:240px" value-format="yyyy-MM-dd" v-model="queryInfo.score_time" @change="getDataList(1)" size="small" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                    <el-button type="primary" size="small" style="margin-left:12px" @click="downloadFile">
                        <div class="flexbox flexcenter flexjust">
                            <svg width="16" height="16" viewBox="0 0 16 16" stroke='white' class="btn_svg" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M4 6L8 2L12 6" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M4 6L8 2L12 6" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            导出数据
                        </div>
                    </el-button>
                </div>
            </div>
            <div class="table_list">
                <DsTable :tableData="tableData" @getDataList="getDataList" @passData2="passData2" v-if="queryInfo.types==0" key="0" />
                <OneTable :tableData="tableData" :queryInfo="queryInfo" @getDataList="getDataList" @viewLog="viewLog" v-else-if="queryInfo.types==1" key="1" />
                <TwoTable :tableData="tableData" :queryInfo="queryInfo" @getDataList="getDataList" @viewLog="viewLog" v-else-if="queryInfo.types==2" key="2" />
                <HzTable :tableData="tableData" :queryInfo="queryInfo" @getDataList="getDataList" v-else-if="queryInfo.types==3" key="3" />
            </div>
            <div class="page_box flexbox flexcenter">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import downLoad from "../../excel/ExportDown";
import AllModel from "./AllModel";
import DsTable from "./DsTable";
import OneTable from "./OneTable";
import TwoTable from "./TwoTable";
import HzTable from "./HzTable";
import ViewLog from "./ViewLog";
import PassForm from "./PassForm";
export default {
    components: {
        AllModel,
        DsTable,
        OneTable,
        TwoTable,
        HzTable,
        ViewLog,
        PassForm,
    },
    props: [],
    name: "",
    data() {
        return {
            loading: false,
            loading2: false,
            countInfo: {
                model_id: null,
                date: [],
            },
            queryInfo: {
                page: 1,
                limit: 20,
                model_id: null,
                query: "",
                types: 0,
                examine: "",
                status: "",
                orderfield: "",
                ordertype: "",
                create_time: [],
                score_time: [],
            },
            tableData: [],
            countData: {},
            examineList: [
                {
                    id: 0,
                    nickname: "待审核",
                },
                {
                    id: 1,
                    nickname: "审核通过",
                },
                {
                    id: -1,
                    nickname: "未通过",
                },
            ],
            statusList: [
                {
                    id: 0,
                    nickname: "待测试",
                },
                {
                    id: -1,
                    nickname: "淘汰",
                },
                {
                    id: 1,
                    nickname: "S级",
                },
                {
                    id: 2,
                    nickname: "A级",
                },
                {
                    id: 3,
                    nickname: "待复测",
                },
                {
                    id: 5,
                    nickname: "复测中",
                },
                {
                    id: -2,
                    nickname: "客户卡审",
                },
            ],
        };
    },
    created() {
        let start_date = this.dayjs().subtract(7, "day").format("YYYY-MM-DD");
        let edn_date = this.dayjs().format("YYYY-MM-DD");
        this.queryInfo.create_time.push(start_date);
        this.queryInfo.create_time.push(edn_date);
        this.getTimeFn();
    },
    methods: {
        getTimeFn() {
            const that = this;
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            end.setTime(end.getTime());
            that.countInfo.date[0] = that.formatDate(start);
            that.countInfo.date[1] = that.formatDate(end);
        },
        formatDate(date) {
            var myyear = date.getFullYear();
            var mymonth = date.getMonth() + 1;
            var myweekday = date.getDate();
            mymonth = mymonth < 10 ? "0" + mymonth : mymonth;
            myweekday = myweekday < 10 ? "0" + myweekday : myweekday;
            return myyear + "-" + mymonth + "-" + myweekday;
        },
        selectTab() {
            this.tableData = [];
            this.resetFun();
        },

        getData(data) {
            this.queryInfo.model_id = data.id;
            this.countInfo.model_id = data.id;
            this.getDataList(1);
            this.getDataCount();
        },

        //获取汇总
        async getDataCount() {
            this.loading2 = true;
            const { data: res } = await this.$http.post(
                "videotest/Probject/summary",
                this.countInfo
            );
            if (res.code !== 200) {
                this.loading2 = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading2 = false;
                this.countData = res.data;
            }
        },

        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "videotest/Probject/materialList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        // 单选
        repeatSinge(a, b, id, name) {
            let text = a
                .filter((item) => {
                    return item[id] == b;
                })
                .map((item) => {
                    return item[name];
                })
                .toString();
            return text;
        },

        // 多选
        repeatFind(b, a, id, name) {
            let arr = [];
            for (let i in b) {
                for (let o in a) {
                    if (b[i] == a[o][id]) {
                        arr.push(a[o][name]);
                    }
                }
            }
            return arr.toString();
        },

        // 查看日志
        viewLog(row) {
            this.$refs.view_log.getData(row);
        },

        // 创建失败通过
        passData2(id) {
            this.$refs.pass_ref.getData(id);
        },

        // 导出数据
        downloadFile() {
            let list = JSON.parse(JSON.stringify(this.tableData));
            for (let i in list) {
                list[i].examine = this.getExmine(list[i].examine);
                list[i].status = this.getStatus(
                    list[i].status,
                    list[i].plan_count
                );
                list[i].protect_time = this.getProtectTime(
                    list[i].protect_time
                );
            }
            let headData = [
                "素材名称",
                "素材ID",
                "审核状态",
                "评分状态",
                "潜力保护结束时间",
                "消耗",
                "GMV",
                "转化成本",
                "ROI",
                "关联中计划数",
                "首次建计划时间",
                "评级优化师",
            ];
            let valueData = [
                "material_name",
                "material_id",
                "examine",
                "status",
                "protect_time",
                "stat_cost",
                "create_order_amount",
                "convert_cost",
                "roi",
                "plan_count",
                "first_time",
                "nickname",
            ];
            var excelDatas = [
                {
                    tHeader: headData,
                    filterVal: valueData,
                    tableDatas: list,
                    sheetName: "汇总数据",
                },
            ];
            downLoad(excelDatas, "汇总数据");
        },

        getExmine(examine) {
            let text = "";
            if (examine == 0) {
                text = "等待审核";
            } else if (examine == -1) {
                text = "审核失败";
            } else if (examine == 1) {
                text = "审核中";
            } else if (examine == -2) {
                text = "计划创建失败";
            }

            return text;
        },

        getStatus(status, plan_count) {
            let text = "";
            if (status == 0) {
                if (plan_count > 0) {
                    text = "测试中";
                } else {
                    text = "待测试";
                }
            } else if (status == -1) {
                text = "淘汰素材";
            } else if (status == -2) {
                text = "客户卡审";
            } else if (status == 1) {
                text = "S 级素材";
            } else if (status == 2) {
                text = "A 级素材";
            } else if (status == 3) {
                text = "待复测";
            }
            return text;
        },

        getProtectTime(time) {
            let text = "";
            if (!time) {
                text = "未开始"; //未开始
            } else {
                let nowDate = new Date();
                let isTime = new Date(time);
                if (nowDate > isTime) {
                    text = "已结束"; //已结束
                } else {
                    text = "保护中"; //保护中
                }
            }
            return text;
        },

        // 清空筛选
        clearQuery(name, type) {
            if (type == 1) {
                this.queryInfo[name] = [];
            } else {
                this.queryInfo[name] = "";
            }
            this.getDataList(1);
        },

        // 重置
        resetFun() {
            this.queryInfo.query = "";
            this.queryInfo.examine = "";
            this.queryInfo.status = "";
            this.queryInfo.orderfield = "";
            this.queryInfo.ordertype = "";
            this.getDataList(1);
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
};
</script>


<style scoped>
.table_list {
    margin: 0 -20px;
    margin-top: 20px;
}
.page_box {
    padding: 0;
}
</style>



